<template>
  <div class="header">
    <div class="header-left">
      <div class="img"><img class="classify" src="../../static/images/classify.png"></div>
      <div class="text">分类</div>
    </div>
    <div class="header-input">
      <img class="searchImg" src="../../static/images/search.png">
      <div class="text1">请输入需要查找的问题标题</div>
    </div>
    <div class="header-right">
      <div class="img1"><img class="userImg1" src="../../static/images/user2.png"></div>
      <div class="text1">我的</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeHeader'
  }
</script>

<style lang="stylus" scoped>
  .header
    display flex
    position relative
    height 290rpx
    line-height 86rpx
    background #66CCFF
    color: #fff
    .header-left
      width 54rpx
      height 86rpx
      margin-left 16rpx
      display flex
      flex-direction column
      float left
      .img
        height 28rpx
      .text
        font-size 12rpx
        margin-left 4rpx
      .classify
        width 34rpx
        height 34rpx
    .header-input
      flex 1
      display flex
      flex-direction row
      height 64rpx
      line-height 64rpx
      margin-top 12rpx
      margin-left 2rpx
      background #fff
      border-radius .3rem
      color #ccc
      align-content center
      .text1
        margin-left 25rpx
      .searchImg
        margin-top 18rpx
        margin-left 20rpx
        margin-right 24rpx
        width 36rpx
        height 36rpx
    .header-right
      width 76rpx
      float right
      text-align center
      .img1
        height 28rpx
      .text1
        font-size 12rpx
      .userImg1
        width 34rpx
        height 34rpx
</style>
